<template>
	<view>
		<cu-custom bgColor="bg-orange">
			<block slot="content">个人资料</block>
		</cu-custom>
		<view class="my-container">
			<login v-if="token==''"></login>
			<view v-else>
				<view class="info">
					<image :src='userinfo.avatarUrl' class="myimg"></image>
					<view class="user">{{userinfo.username}}</view>
				</view>
				<view class="panel">
					<view class="panel-list-item" @click="modify">
						<view style="display: flex;justify-content: center;">
							<van-icon name="font-o" color="#FDD692" size='23' />
							<text style="margin-left: 10rpx;">修改资料</text>
						</view>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
					<view class="panel-list-item" @click="about">
						<view style="display: flex;justify-content: center;">
							<van-icon name="comment-o" color="#80d4f6" size='23' />
							<text style="margin-left: 10rpx;">关于寻迹</text>
						</view>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
					<view class="panel-list-item" >
						<view style="display: flex;justify-content: center;">
							<van-icon name="chat-o" color="#8CD790" size='23' />
							<button type="default" open-type="contact" style="color:#666 ; background-color: #fff; font-size: 35rpx; border-color: #fff;padding-left: 0rpx;margin-left: 10rpx;" plain>联系我们</button>
						</view>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
					<view class="panel-list-item" @click="logout">
						<view style="display: flex;justify-content: center;">
							<van-icon name="info-o" color="#D09E88" size='23' />
							<text style="margin-left: 10rpx;">退出登录</text>
						</view>
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_user', ['token', 'userinfo']),
			...mapState('m_course', ['courseinfo'])
		},
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
			...mapMutations('m_course', ['updateCourseInfo']),
			...mapMutations('m_todo', ['updatetodolist']),
			...mapMutations('m_chat', ['updatechatinfo']),
			...mapMutations('m_chat', ['updatechatinfo']),
			...mapMutations('m_pay', ['updatepayinfo']),
			...mapMutations('m_count', ['updatecountdown']),
			...mapMutations('m_life', ['updatelifething']),
			...mapMutations('m_word', ['updatehistoryword']),
			async logout() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)

				if (succ && succ.confirm) {
					this.updateUserInfo({})
					this.updateToken('')
					this.updateCourseInfo([])
					this.updatetodolist([])
					this.updatechatinfo([])
					this.updatechatinfo([])
					this.updatepayinfo([])
					this.updatecountdown([])
					this.updatelifething([])
					this.updatehistoryword([])
					const redirectInfo = {
						openType: 'switchTab',
						from: '/pages/my/my'
					}
					this.updateRedirectInfo(redirectInfo)
				}
			},
			modify() {
				uni.navigateTo({
					url: '/subpkg/rebulidinfo/rebulidinfo'
				})
			},
			about(){
				uni.navigateTo({
					url: '/pages/about/about'
				})
			}
		}
	}
</script>

<style lang="less">
	.info {
		display: flex;
		margin-top: 140rpx;
		margin-bottom: 40rpx;
		justify-content: center;
		align-items: center;

		.myimg {
			height: 200rpx;
			width: 200rpx;
			border-radius: 50%;
		}

		.user {
			color: #f39a6e;
			margin-left: 40rpx;
			font-size: 90rpx;
		}
	}

	.panel {
		margin: 75rpx 30rpx;
		border-radius: 30rpx;
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);

		.panel-list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 35rpx;
			padding: 0 10px;
			line-height: 45px;
			background-color: #ffffff;
			border-bottom: 1px solid #F4F4F4;
		}
	}

	.is-hover {
		color: #ffffff;
		background-color: #179b16;
		border-color: #179b16;
	}
</style>